<template>
  <div class="grid-content" @click="triggerGridItem()" ref="grid-content">
    <el-card :shadow="shadow" :body-style="bodyStyle">
      <div class="grid-card">
        <div>
          <svg-icon :icon-class="icon" className='grid-icon'></svg-icon>
        </div>
        <div style="height:38px;" v-show="des">{{des}}</div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  /**
   * 单个宫格组件
   */
  name: 'GridItem',
  props: {
    // icon (以后扩展,不一定是icon)
    icon: {
      type: String,
      default: ''
    },
    // 描述
    des: {
      type: String,
      default: ''
    },
    // 设置阴影显示时机 （未实现）
    shadow: {
      type: String,
      default: 'hover'
    },
    // 设置宫格内容样式
    bodyStyle: {
      type: Object,
      default: () => ({ padding: '8px 6px' })
    },
    // 设置外边框 （未实现）
    border: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    triggerGridItem () {
      this.$emit('triggerGridItem')
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.grid-content {
  height: 93px;
  cursor: pointer;
  .el-card {
    border: 0px solid #ebeef5;
    .grid-card {
      height: 77px;
      color: $--color_text;
      text-align: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content:space-around;
      .grid-icon {
        font-size: 30px;
      }
      &:hover {
        color: $theme_summer_color;
        .grid-icon {
          color: $theme_summer_color;
        }
      }
    }
  }
}
</style>
